<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>哈希256</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background: url("img/蓝色粒子.jpg");
    }

    .container {
      width: 800px;
      height: 410px;
      border: 1px solid gray;
      position: absolute;
      top: 100px;
      left: 18%;
      padding: 10px;
      border-radius: 10px;
      background-color: aliceblue;
      box-shadow: 0 5px 4px rgb(64, 135, 235);
    }

    /*  拖拽div  外壳 */
    .container .tz_div {
      position: relative;
      height: 110px;
      width: 99%;
      /* border: 1px solid red; */
      display: flex;

    }

    .container .tz_div .fztz {
      width: 49%;
      height: 99%;
      border: 1px solid gray;
      border-radius: 10px;
      text-align: center;
      line-height: 110px;
      user-select: none;
      color: gray;
    }

    .container .tz_div :nth-child(2) {
      margin-left: 10px;
    }

    /* 选择文件 */
    .container .xz_file {
      position: relative;
      display: flex;
      top: 10px;
      width: 99%;
      height: 10%;
      /* background-color: aliceblue; */
      text-align: center;
      border-radius: 5px;

      padding-top: 8px;
    }

    .container .xz_file input {
      display: block;
      width: 48%;
      height: 30px;
      padding-left: 50px;
      /* border: 1px solid red; */
      overflow: hidden;
      border: 1px solid gray;
      padding-top: 5px;
      border-radius: 5px;
      cursor: pointer;
    }

    .container .xz_file :nth-child(2) {
      margin-left: 10px;
    }

    /* 哈希256结果 div */
    .container .hex256_result {
      display: flex;

      width: 99%;
      height: 130px;
      margin-top: 10px;
      /* border: 1px solid red; */
      border-radius: 10px;
      /* overflow: hidden; */
    }

    /* 提示文字 */
    .container .text_result {
      position: relative;
      top: 10px;
      width: 98%;
      height: 20px;
      padding: 5px;
      /* color: aliceblue; */
      /* border: 1px solid red; */
    }

    /* 哈希256结果  文本域公用属性 */
    .container .hex256_result textarea {
      width: 48%;
      height: 90px;
      border-radius: 10px;
      padding: 10px;
    }

    /*哈希256结果  文本域 2  */
    .container .hex256_result :nth-child(2) {
      margin-left: 10px;
    }

    /* 比对按钮 */
    .container button {
      position: relative;
      /* top: 10px; */
      width: 100%;
      height: 30px;
      background-color: rgb(62, 62, 243);
      border: none;
      border-radius: 8px;
      cursor: pointer;
      /* left: 5%; */
    }

    .container #bd_result {
      position: relative;
      /* top: 30px; */
      width: 100%;
      height: 25px;
      display: block;
      color: red;
      /* border: 1px solid red; */
      text-align: center;
      user-select: none;
    }

    .zoomed {
      animation: yy 0.3s ease-in-out;

    }

    @keyframes yy {
      0% {
        transform: scale(1);

      }

      50% {
        transform: scale(1.2);

        /* transform: rotateX(30deg); */
      }

      100% {
        transform: scale(1);
      }

    }
  </style>
</head>

<body>
  <div class="container">
    <div class="tz_div">
      <div class="fztz" id="fztz1" multiple webkitdirectory mozdirectoey odirectory>
        请将文件拖拽到这里
      </div>
      <div class="fztz" id="fztz2" multiple webkitdirectory mozdirectoey odirectory>
        请将文件拖拽到这里
      </div>

    </div>
    <div class="xz_file">
      <!-- // webkitdirectory 属性为上传文件夹-->
      <input type="file" id="file_input" multiple mozdirectoey odirectory>
      <input type="file" id="file_input1" multiple mozdirectoey odirectory>
    </div>
    <div class="text_result">哈希256结果</div>
    <div class="hex256_result">

      <textarea id="textarea_hex256"></textarea>
      <textarea id="textarea_hex256_1"></textarea>

    </div>
    <button type="button" id="bidui_btn">比对</button>
    <p id="bd_result"></p>

  </div>

  <script src="./js/Hex_256.js"> </script>
</body>

</html>